<template>
    <div>
        <el-row>
            <el-col :span="6" v-show="showRegister">


                <el-tabs type="border-card">

                    <el-tab-pane label="本人">


                        <RegisterList :type="'doctor'" :selectRegister="selectRegister" ref="registerListRef1">
                        </RegisterList>

                    </el-tab-pane>
                    <el-tab-pane label="本科室">
                        <RegisterList :type="'dept'" :selectRegister="selectRegister" ref="registerListRef2">
                        </RegisterList>

                    </el-tab-pane>
                </el-tabs>



            </el-col>
            <el-col :span="18">

                <el-row>
                    <el-col :spa="12">
                        <el-button @click="showRegister = !showRegister">
                            {{ showRegister ? '隐藏患者' : '显示患者' }}
                        </el-button>
                    </el-col>

                    <el-col :spa="12">
                        <el-tag type="success" v-if="form.registId" size="large"> 患者姓名: {{ form.name }},年龄 :{{ form.age
                            }}</el-tag>
                        <el-tag type="danger" v-else size="large">未选择患者，请选择</el-tag>
                    </el-col>
                </el-row>

                <el-tabs type="border-card" v-model="CardName" :before-leave="beforeChangeCard">

                    <el-tab-pane label="病历首页" name="card1">

                        <el-row justify="space-evenly" style="background-color: #EAF1F5;padding: 3px ;">
                            <el-col :span="3" class="btn-col"> <el-button link type="primary"
                                    @click="saveInquiry('2')">暂存</el-button> </el-col>
                            <el-col :span="3" class="btn-col"> <el-button link type="primary"
                                    @click="saveInquiry('3')">提交</el-button> </el-col>
                            <el-col :span="3" class="btn-col"> <el-button link type="primary">清空所有</el-button> </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="24">
                                <el-tag type="primary">病史内容</el-tag>
                            </el-col>

                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form :model="form" label-width="200px">
                                    <el-form-item label="主诉">
                                        <el-input v-model="form.readme" />
                                    </el-form-item>
                                    <el-form-item label="现病史">
                                        <el-input v-model="form.present" />
                                    </el-form-item>
                                    <el-form-item label="现病治疗情况">
                                        <el-input v-model="form.presentTreat" />
                                    </el-form-item>
                                    <el-form-item label="既往史">
                                        <el-input v-model="form.history" />
                                    </el-form-item>
                                    <el-form-item label="过敏史">
                                        <el-input v-model="form.allergy" />
                                    </el-form-item>
                                    <!-- <el-form-item label="体格检查">
                                        <el-input v-model="form.allergy" />
                                    </el-form-item> -->

                                </el-form>





                            </el-col>

                        </el-row>





                    </el-tab-pane>
                    <el-tab-pane label="检查申请" name="card2">
                        <el-row justify="space-evenly" style="background-color: #EAF1F5;padding: 3px ;">
                            <el-col :span="3" class="btn-col"> <el-button link type="primary"
                                    @click="showSelectCheckItemDialog = true">新增项目</el-button> </el-col>
                            <!-- <el-col :span="3" class="btn-col"> <el-button link type="primary">删除项目</el-button> </el-col> -->
                            <el-col :span="3" class="btn-col"> <el-button link type="primary">刷新</el-button> </el-col>
                        </el-row>
                        <el-table :data="checkItems" style="width: 100%">
                            <el-table-column type="selection" width="180" />
                            <el-table-column prop="name" label="检查项目名称" width="180" />

                            <el-table-column prop="price" label="单价" />
                            <el-table-column prop="status" label="状态">
                                <template #default="scope">
                                    {{ translateCode2Name('CheckApplyStatus', scope.row.status) }}
                                </template>
                            </el-table-column>

                            <el-table-column prop="status" label="删除">
                                <template #default="scope">
                                    <el-button v-if="scope.row.status == 1" link type="primary"
                                        @click="removeCheckApply(scope.row)">删除</el-button>
                                    <span v-else></span>
                                </template>
                            </el-table-column>

                            <el-table-column prop="status" label="查看">
                                <template #default="scope">
                                    <el-button v-if="scope.row.status == 3" link type="primary"
                                        @click="showCheckApplyDetail(scope.row)">查看</el-button>
                                    <span v-else></span>
                                </template>
                            </el-table-column>
                        </el-table>

                    </el-tab-pane>


                    <el-tab-pane label="检验申请" name="card3">
                        <el-row justify="space-evenly" style="background-color: #EAF1F5;padding: 3px ;">
                            <el-col :span="3" class="btn-col"> <el-button link type="primary"
                                    @click="showSelectInspectItemDialog = true">新增项目</el-button> </el-col>
                            <!-- <el-col :span="3" class="btn-col"> <el-button link type="primary">删除项目</el-button> </el-col> -->
                            <el-col :span="3" class="btn-col"> <el-button link type="primary">刷新</el-button> </el-col>
                        </el-row>
                        <el-table :data="inspectItems" style="width: 100%">
                            <el-table-column type="selection" width="180" />
                            <el-table-column prop="name" label="检验项目名称" width="180" />

                            <el-table-column prop="price" label="单价" />
                            <el-table-column prop="status" label="状态">
                                <template #default="scope">
                                    {{ translateCode2Name('InspectApplyStatus', scope.row.status) }}
                                </template>
                            </el-table-column>

                            <el-table-column prop="status" label="删除">
                                <template #default="scope">
                                    <el-button v-if="scope.row.status == 1" link type="primary"
                                        @click="removeInspectApply(scope.row)">删除</el-button>
                                    <span v-else></span>
                                </template>
                            </el-table-column>


                        </el-table>
                    </el-tab-pane>

                    <el-tab-pane label="诊断" name="card4">

                        <el-row justify="space-evenly" style="background-color: #EAF1F5;padding: 3px ;">
                            <el-col :span="3" class="btn-col"> <el-button link type="primary"
                                    @click="sure">确诊</el-button>
                            </el-col>

                        </el-row>

                        <el-row>
                            <el-col :span="24">
                                <el-tag type="primary">诊断信息</el-tag>
                            </el-col>

                        </el-row>
                        <el-row>
                            <el-col :span="24">

                                <el-form :model="form" label-width="200px">
                                    <el-form-item label="确诊疾病">
                                        <el-input v-model="form.disease" />
                                    </el-form-item>
                                    <el-form-item label="处置方案">
                                        <el-input v-model="form.suit" />
                                    </el-form-item>
                                    <el-form-item label="药品清单">
                                        <el-input v-model="form.drug" />
                                    </el-form-item>

                                </el-form>

                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>



            </el-col>



        </el-row>





        <el-dialog v-model="showSelectCheckItemDialog" title="选择检查项目">

            <CheckItemSelect v-if="showSelectCheckItemDialog" :receive="receiveCheckItemSelect"
                :regist-id="form.registId">
            </CheckItemSelect>



        </el-dialog>


        <el-dialog v-model="showSelectInspectItemDialog" title="选择检验项目">

            <InspectItemSelect v-if="showSelectInspectItemDialog" :receive="receiveInspectItemSelect"
                :regist-id="form.registId">
            </InspectItemSelect>



        </el-dialog>



        <el-dialog v-model="showCheckDetailDialog" title="检查执行" width="500px">

            <CheckApplyDetail v-if="showCheckDetailDialog" :itemId="checkApplyItemId"
                :currentStatus="checkApplyItemStatus">
            </CheckApplyDetail>


        </el-dialog>



    </div>
</template>

<script setup lang="ts" name='index'>
import { ref, reactive } from "vue";
import RegisterList from './RegisterList.vue'
import type { RegisterForm } from "@/api/common/types";
import { service } from "@/utils/request";
import { ElMessage, ElMessageBox } from 'element-plus'
import CheckItemSelect from "./CheckItemSelect.vue";
import InspectItemSelect from "./InspectItemSelect.vue";
import { translateCode2Name } from '@/utils/constantsUtils'
import CheckApplyDetail from '@/views/skill/checkapply/check_apply_detail.vue'



const showRegister = ref(true)

//是否显示  选择 检查项目的 弹窗
const showSelectCheckItemDialog = ref(false)

//是否显示  选择 检验项目的 弹窗
const showSelectInspectItemDialog = ref(false)

// 是否显示 检查详情页面
const showCheckDetailDialog = ref(false);
// checkApplyItemId 项目id ，状态
const checkApplyItemId = ref('');
const checkApplyItemStatus = ref('');





const registerListRef1 = ref()
const registerListRef2 = ref()

//已申请的检查、检验列表 
const checkItems = ref<any[]>([]);
const inspectItems = ref<any[]>([]);


//病例首页被选中
const CardName = ref("card1");




const form = reactive<RegisterForm>({
    registId: null,
    name: '',
    gender: "",
    age: 0,
    readme: "",
    present: "",
    presentTreat: "",
    history: "",
    allergy: "",
    disease: "",
    suit: "",
    drug: "",
    status: ''
})


function clearRegister() {
    checkItems.value = [];
    inspectItems.value = [];
    form.readme = ''
    form.present = ''
    form.presentTreat = ''
    form.history = ''
    form.allergy = ''
    form.disease = ''
    form.suit = ''
    form.drug = ''
}
function selectRegister(register: any) {


    clearRegister();
    form.registId = register.registId
    form.name = register.name
    form.age = register.age
    form.status = register.status



    if (register.status != '1') {
        //根据id 查询患者
        service.get<RegisterForm>('/doctor/queryRegisterInfo', {
            params: {
                id: register.registId
            }
        }).then((retRegister: RegisterForm) => {
            form.readme = retRegister.readme
            form.present = retRegister.present
            form.presentTreat = retRegister.presentTreat
            form.history = retRegister.history
            form.allergy = retRegister.allergy
            form.disease = retRegister.disease
            form.suit = retRegister.suit
            form.drug = retRegister.drug
            form.status = retRegister.status

        })


        //查询已申请的检查项目
        loadRegisterCheckApply();

        loadRegisterInspectApply();
    } else {
        CardName.value = 'card1'
    }

}


function saveInquiry(status: string) {

    const url = '/doctor/inquiry'
    form.status = status;
    service.get(url, {
        params: form
    }).then(success => {
        if (success) {
            ElMessage({
                message: '保存成功',
                type: 'success'
            })
            registerListRef1.value.loadRegisterList();
            registerListRef2.value.loadRegisterList();
            console.log("registerListRef1", registerListRef1)


        } else {
            ElMessage({
                message: '保存成功',
                type: 'error'
            })
        }
    })


}


function receiveCheckItemSelect(selectCheckItems: any[]) {

    checkItems.value = selectCheckItems;

    // queryCheckApplyByRegisterId

    loadRegisterCheckApply();


    showSelectCheckItemDialog.value = false;
}


function receiveInspectItemSelect() {
    // checkItems.value = selectCheckItems;

    // queryCheckApplyByRegisterId

    loadRegisterInspectApply();


    showSelectInspectItemDialog.value = false;
}


function loadRegisterCheckApply() {
    service.get<any[]>('/doctor/queryCheckApplyByRegisterId', {
        params: {
            registerId: form.registId
        }
    }).then((checkApplys: any[]) => {
        checkItems.value = checkApplys
    })
}
function loadRegisterInspectApply() {
    service.get<any[]>('/doctor/queryInspectApplyByRegisterId', {
        params: {
            registerId: form.registId
        }
    }).then((inspectApplys: any[]) => {
        inspectItems.value = inspectApplys
    })
}


function removeCheckApply(checkApplay: any) {
    if (checkApplay.status == 1) {
        service.get('/doctor/removeCheckApplayItem', {
            params: {
                itemId: checkApplay.itemId
            }
        }).then(success => {
            if (success) {
                ElMessage({
                    message: '删除成功',
                    type: 'success'
                })
                loadRegisterCheckApply();
            } else {
                ElMessage({
                    message: '删除失败',
                })
            }
        })
    } else {
        ElMessage({
            message: '只有待缴费的申请可以删除',
            type: 'error'
        })
    }

}
function removeInspectApply(inspectApply: any) {
    if (inspectApply.status == 1) {
        service.get('/doctor/removeInspectApplayItem', {
            params: {
                itemId: inspectApply.itemId
            }
        }).then(success => {
            if (success) {
                ElMessage({
                    message: '删除成功',
                    type: 'success'
                })
                loadRegisterInspectApply();
            } else {
                ElMessage({
                    message: '删除失败',
                })
            }
        })
    } else {
        ElMessage({
            message: '只有待缴费的申请可以删除',
            type: 'error'
        })
    }

}

//切换 选项卡（病历首页、检查申请、检验申请）
function beforeChangeCard(cardName: string) {
    if (cardName == 'card1') {
        return true;
    }

    if (form.registId && form.status != "1") {
        return true;
    } else {
        ElMessage({
            message: '请选择一个提交患者 ',
            type: "error"
        })
        return false;
    }
}


function showCheckApplyDetail(checkApplay: any) {

    checkApplyItemId.value = checkApplay.itemId;
    checkApplyItemStatus.value = checkApplay.status;

    showCheckDetailDialog.value = true;

}

/**
 * 确诊
 */
function sure() {

    const url = '/doctor/sure'

    service.get(url, {
        params: form
    }).then(success => {
        if (success) {
            ElMessage({
                message: '执行成功',
                type: 'success'
            })

        } else {
            ElMessage({
                message: '执行失败',
                type: 'error'
            })
        }
    })

}

</script>

<style scoped></style>